<template>
	<view>
		<z-paging class="wrap" ref="paging" v-model="dataList" @query="queryList">
			<cu-custom slot="top" bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">维修记录</block>
			</cu-custom>
			<view slot="top" class="search">
				<u-search placeholder="根据点位名称/故障描述/添加人搜索" v-model="getData.KeyWord" @custom='search()' @search='search()'></u-search>
			</view>
				<view class="situationBox">
					<!-- 循环 -->
					<view  @click="seeMaintainInfo(res.Id)"  v-if="dataList.length>0" class="maintainBoxJiHua"  v-for="(res, index) in dataList" :key="res.Id">
						<view class="itemTitle">
							<text>{{res.Desc==null?'未填写':res.Desc}}</text>
							<view class="itemStateJiHua1">已结案</view>
						</view>
						<view class="itemDate">上报人/上报时间：{{res.AddUserName}} / {{res.AddTime}}</view>
						<view class="itemPreson">维修人：{{res.SceneUserName}}</view>
						<view class="last">
							<view class="itemPer">
								<u-line-progress active-color="#0081ff" :percent="100"></u-line-progress>
							</view>
							<view class="seeMore">详情 ></view>
						</view>
					</view>
				</view>
		</z-paging>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data(){
			return{
				dataList:[],
				getData:{
					qrcodeId:'',
					KeyWord:'',
					PageIndex:1,
					PageSize:10,
					Sort: 'AddTime',
					SortType: 'desc',
				},
			}
		},
		onLoad(options) {
			this.getData.qrcodeId=options.qrcodeId;
		},
		methods:{
			queryList(pageNo, pageSize) {
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'cofcoApi/GetETRepairRecordPageList',
					method: 'get'
				};
				that.getData.PageIndex=pageNo;
				that.getData.PageSize=pageSize;
				request.httpTokenRequest(opts,that.getData).then(res => {
					if(res.data.code == 1){
						this.$refs.paging.complete(res.data.data);
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			// 查看设备维修详情
			seeMaintainInfo(e){
				//维修详情的id
				let id=e
				// uni.navigateTo({
				// 	url:'/pages-device/repair/maintainInfo?repairId='+id
				// })
				
				uni.navigateTo({
					url: '/pages/qrcode/scene/detail?id='+e//+'&desc='+desc+'&IsAdmin='+res1.data.IsAdmin
				})
			},
			// 搜索框
			search(e){
				let that=this
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.KeyWord=e
				this.queryList(1,10);
			}
		}
	}
</script>

<style lang="scss">
.search{
	width: 100%;
	height: 100rpx;
	padding: 20rpx 2% 0 2%;
	background-color: #fff;
	// display: flex;
	// align-items: center;
}
.situationBox{
	background-color: rgba(249, 249, 249, 1);
}
//设备维修记录
//<!-- 1.计划  #0079FE  2 故障  #FE9400  3 大修  #F56C6C -->
.maintainBoxJiHua{
	width: 96%;
	height: 220rpx;
	margin: 10rpx 2% 15rpx 2%;
	border-left: 3px solid #0079FE;
	border-radius: 0 5px 5px 0;
	padding: 0 3%;
	color: #999999;
	background-color: #fff;
	font-size: 23rpx;
	position: relative;
	padding-top: 10rpx;
}
.maintainBoxGuZhang{
	width: 96%;
	height: 220rpx;
	margin: 10rpx 2% 15rpx 2%;
	border-left: 3px solid #FE9400;
	border-radius: 0 5px 5px 0;
	padding: 0 3%;
	color: #999999;
	background-color: #fff;
	font-size: 23rpx;
	position: relative;
	padding-top: 10rpx;
}
.maintainBoxDaXiu{
	width: 96%;
	height: 220rpx;
	margin: 10rpx 2% 15rpx 2%;
	border-left: 3px solid #F56C6C;
	border-radius: 0 5px 5px 0;
	padding: 0 3%;
	color: #999999;
	background-color: #fff;
	font-size: 23rpx;
	position: relative;
	padding-top: 10rpx;
}
.itemTitle{
	margin: 15rpx 0;
	display: flex;
	font-size: 28rpx;
	font-weight: 400;
	justify-content: space-between;
}
.weixu{
	font-size: 23rpx;
}
.itemPreson{
	margin: 15rpx 0;
}
.itemState{
	width: 90rpx;
	height: 40rpx;
	font-size: 25rpx;
	line-height: 40rpx;
	text-align: center;
	color: #fe9400;
	border: 1px solid #fe9400;
	border-radius: 5px;
	position: absolute;
	right: 3%;
	top: 80rpx;
}
.itemStateJiHua{
	width: 90rpx;
	height: 40rpx;
	font-size: 25rpx;
	line-height: 40rpx;
	text-align: center;
	color: #0079FE;
	border: 1px solid #0079FE;
	border-radius: 5px;
	position: absolute;
	right: 3%;
	top: 80rpx;
}
.itemStateJiHua1{
	width: 90rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	color: #19BE6B;
	border: 1px solid #19BE6B;
	border-radius: 3px;
	font-size: 22rpx;
	background-color: rgba(25, 190, 107, 0.1);
	position: absolute;
	right: 3%;
}
.itemStateGuZhang{
	width: 90rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	color: #f37b1d;
	border: 1px solid #f37b1d;
	border-radius: 3px;
	font-size: 22rpx;
	background-color: #F4E8DF;
	position: absolute;
	right: 3%;
}
.itemStateDaXiu{
	width: 90rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	color: #e54d42;
	border: 1px solid #e54d42;
	border-radius: 3px;
	font-size: 22rpx;
	background-color: #F3E4E3;
	position: absolute;
	right: 3%;
}
.last{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.itemPer{
		width: 82%;
	};
	.seeMore{
		font-size: 25rpx;
		width: 80rpx;
		height: 40rpx;
	}
}

.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
</style>